<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
    <meta name="color-scheme" content="light dark" />
    <meta name="theme-color" content="#0f172a" />
    <title>币胜客pro</title>
    <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='46' fill='%230f172a'/%3E%3Ctext x='50' y='58' font-family='Arial' font-size='44' text-anchor='middle' fill='%23fff'%3EB%3C/text%3E%3C/svg%3E" />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div id="app" class="app">
      <header class="site-header" role="banner">
        <div class="container">
          <a href="#home" class="brand" aria-label="币胜客pro 首页">
            <span class="brand-mark" aria-hidden="true">⬤</span>
            <span class="brand-name">币胜客<span class="brand-pro">pro</span></span>
          </a>
        </div>
      </header>

      <main id="main" class="site-main" role="main" tabindex="-1">
        <section id="home" class="view is-active" role="region" aria-labelledby="home-title">
          <div class="container hero">
            <h1 id="home-title" class="hero-title">币胜客pro</h1>
            <p class="hero-sub">智能量化策略 · 一键跟单 · 账号中心</p>
            <div class="hero-cta">
              <button class="btn primary" data-nav="strategies">进入市场</button>
              <button class="btn" data-nav="orders">查看订单</button>
            </div>
          </div>
          <div class="container section">
            <div class="cards is-hidden" id="home-data">
              <section class="card">
                <h3 class="card-title">资金概览</h3>
                <div class="portfolio" id="home-portfolio"><p class="muted">登录后可查看</p></div>
              </section>
              <section class="card card-clickable" data-nav="orders">
                <h3 class="card-title">最近订单</h3>
              </section>
            </div>
          </div>
        </section>

        <section id="strategies" class="view" role="region" aria-labelledby="strategies-title">
          <div class="container section">
            <h2 id="strategies-title">策略市场</h2>
            <ul class="list" id="market-list"><li class="muted">加载中...</li></ul>
          </div>
        </section>

        <section id="orders" class="view" role="region" aria-labelledby="orders-title">
          <div class="container section">
            <h2 id="orders-title">交易记录</h2>
            <div class="card">
              <div style="display:flex;justify-content:space-between;align-items:center;gap:8px;">
                <span class="card-title">最近订单</span>
              </div>
              <div class="table-wrap">
                <table class="table">
                  <thead><tr><th>时间</th><th>符号</th><th>方向</th><th>价格</th><th>数量</th><th>状态</th></tr></thead>
                  <tbody id="orders-tbody"><tr><td colspan="6" class="muted">加载中...</td></tr></tbody>
                </table>
              </div>
            </div>
          </div>
        </section>
        <section id="subscriptions" class="view" role="region" aria-labelledby="subscriptions-title">
          <div class="container section">
            <h2 id="subscriptions-title">订阅管理</h2>
            <div class="card">
              <div style="display:flex;justify-content:space-between;align-items:center;gap:8px;">
                <h3 class="card-title">我的订阅</h3>
                <div>
                  <button class="btn" id="btn-subs-resume-all">全部恢复</button>
                  <button class="btn" id="btn-subs-pause-all">全部暂停</button>
                </div>
              </div>
              <div id="subs-list"><p class="muted">加载中...</p></div>
              <div id="subs-edit-modal" class="modal is-hidden" role="dialog" aria-modal="true">
                <div class="modal-backdrop" data-close="modal"></div>
                <div class="modal-panel" role="document">
                  <h3 class="modal-title" id="subs-edit-title">编辑订阅</h3>
                  <div id="subs-edit-form"></div>
                </div>
              </div>
            </div>
          </div>
        </section>

        <section id="broadcast" class="view broadcast-view" role="region" aria-labelledby="broadcast-title">
          <div class="container section">
            <h2 id="broadcast-title">广播功能</h2>
            <div class="auth">
              <div class="auth-guest" id="broadcast-guest">
                <div class="card">
                  <h3 class="card-title">📡 系统广播</h3>
                  <p class="muted">请先登录以使用广播功能</p>
                </div>
              </div>
              <div class="auth-user" id="broadcast-user" style="display:none;">
                <div class="card">
                  <h3 class="card-title">📡 广播分组</h3>
                  <p class="muted">加入广播分组以接收交易信号和通知</p>
                  <div class="form-msg" id="broadcast-msg"></div>
                </div>
                
                <div class="card">
                  <h3 class="card-title">✅ 已加入分组</h3>
                  <div id="joined-groups-list">
                    <p class="muted">加载中...</p>
                  </div>
                </div>
                
                <div class="card">
                  <h3 class="card-title">📋 广播分组列表</h3>
                  <div id="broadcast-list">
                    <p class="muted">加载中...</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        <section id="settings" class="view" role="region" aria-labelledby="settings-title">
          <div class="container section">
            <h2 id="settings-title">设置</h2>
            <div class="auth">
              <div class="auth-guest" id="settings-guest">
                <div class="segmented" role="tablist" aria-label="认证切换">
                  <button class="seg-btn is-active" data-tab="login" role="tab" aria-selected="true">登录</button>
                  <button class="seg-btn" data-tab="register" role="tab" aria-selected="false">注册</button>
                </div>
                <form id="login-form" class="form" autocomplete="on" novalidate>
                  <div class="field">
                    <label for="login-username">邮箱</label>
                    <input id="login-username" name="email" class="input" placeholder="请输入邮箱" required />
                  </div>
                  <div class="field">
                    <label for="login-password">密码</label>
                    <input id="login-password" name="password" type="password" class="input" placeholder="请输入密码" required />
                  </div>
                  <button class="btn primary" type="submit">登录</button>
                  <div class="form-msg" id="login-msg" aria-live="polite"></div>
                </form>
                <form id="register-form" class="form is-hidden" autocomplete="on" novalidate>
                  <div class="field">
                    <label for="reg-username">邮箱</label>
                    <input id="reg-username" name="email" class="input" placeholder="设置邮箱" required />
                  </div>
                  <div class="field">
                    <label for="reg-password">密码</label>
                    <input id="reg-password" name="password" type="password" class="input" placeholder="设置密码" required />
                  </div>
                  <button class="btn primary" type="submit">注册</button>
                  <div class="form-msg" id="register-msg" aria-live="polite"></div>
                </form>
              </div>
              <div class="auth-authed is-hidden" id="settings-authed">
                <div class="card authed-header">
                  <div class="authed-row">
                    <div class="authed-main">
                      <p id="authed-hello">已登录</p>
                      <p class="sub" id="authed-email">加载中...</p>
                    </div>
                    <div class="authed-actions">
                      <button class="btn" id="logout-btn">退出登录</button>
                    </div>
                  </div>
                </div>

                <div class="cards">
                  <section class="card">
                    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;">
                      <h3 class="card-title" style="margin:0;">已绑定的交易所</h3>
                      <button class="btn" id="btn-refresh-connectors" style="padding:6px 12px;font-size:12px;">刷新</button>
                    </div>
                    <div id="bound-connectors-list">
                      <p class="muted">加载中...</p>
                    </div>
                  </section>
                  <section class="card">
                    <form id="form-bind">
                      <div class="field" style="display: none;">
                        <label>账户名称</label>
                        <input class="input" id="bind-account" placeholder="例如 user@example.com" />
                      </div>
                      <div class="field">
                        <label>选择连接器</label>
                        <select class="input" id="bind-connector-select"></select>
                        <input class="input" id="bind-connector" placeholder="例如 binance" style="display:none;" aria-hidden="true" />
                      </div>
                      <div class="field" id="bind-cred-fields-wrap">
                        <label>所需凭据</label>
                        <div id="bind-cred-fields"></div>
                        <p class="muted small">请选择连接器后，按提示填写所有必填项。</p>
                      </div>
                      
                      <button class="btn" id="bind-submit" type="submit" disabled>绑定交易所</button>
                      <div class="form-msg" id="bind-msg"></div>
                    </form>
                  </section>
                  <section class="card" id="admin-strategy-mgr-entry" style="display:none;">
                    <h3 class="card-title">策略管理（管理员）</h3>
                    <button class="btn" id="btn-open-strategy-mgr">进入管理界面</button>
                  </section>
                  <section class="card is-hidden" id="admin-strategy-mgr-view">
                    <div style="display:flex;justify-content:space-between;align-items:center;gap:8px;">
                      <h3 class="card-title">策略管理</h3>
                      <div>
                        <button class="btn" id="btn-mgr-back">返回设置</button>
                        <button class="btn primary" id="btn-mgr-create">创建策略</button>
                      </div>
                    </div>
                    <div id="strategy-mgr-list"><p class="muted">加载中...</p></div>
                    <div id="strategy-mgr-modal" class="modal is-hidden" role="dialog" aria-modal="true">
                      <div class="modal-backdrop" data-close="modal"></div>
                      <div class="modal-panel" role="document">
                        <h3 class="modal-title" id="mgr-modal-title">创建/编辑策略</h3>
                        <div id="strategy-mgr-form"></div>
                      </div>
                    </div>
                  </section>
                  <section class="card">
                    <h3 class="card-title">用户设置</h3>
                    <div class="field"><label><input type="checkbox" id="set-tv-enabled" /> 开启 TradingView 信号</label></div>
                    <div class="field"><label><input type="checkbox" id="set-global-pause" /> 全局暂停执行</label></div>
                    <button class="btn" id="btn-save-settings">保存</button>
                    <div class="form-msg" id="settings-msg"></div>
                  </section>
                </div>
              </div>
            </div>
          </div>
        </section>

        <!-- 订阅弹窗 -->
        <div class="modal is-hidden" id="sub-modal" role="dialog" aria-modal="true">
          <div class="modal-backdrop" data-close="modal"></div>
          <div class="modal-panel" role="document">
            <h3 class="modal-title">订阅策略</h3>
            <div class="form">
              <div class="field">
                <label for="sub-account">选择交易所</label>
                <select id="sub-account" class="input"></select>
              </div>
              <div class="field">
                <label for="sub-amount">投入比例(%)</label>
                <input id="sub-amount" class="input" type="number" min="0" max="100" step="0.01" placeholder="如 10" />
              </div>
              <div class="form-msg" id="sub-msg"></div>
              <div style="display:flex;justify-content:flex-end;gap:8px;">
                <button class="btn" id="sub-cancel">取消</button>
                <button class="btn primary" id="sub-confirm">确认订阅</button>
              </div>
            </div>
          </div>
        </div>
      </main>

      <nav class="tabbar" role="navigation" aria-label="底部导航">
        <ul class="tabbar-list">
          <li class="tab-item is-active">
            <button class="tab-btn" data-target="home" aria-current="page" aria-label="首页">
              <span class="tab-icon" aria-hidden="true">
                <!-- home icon -->
                <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                  <path d="M3 10.5L12 3l9 7.5V21a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1v-10.5z" />
                </svg>
              </span>
              <span class="tab-label">首页</span>
            </button>
          </li>
          <li class="tab-item">
            <button class="tab-btn" data-target="strategies" aria-label="市场">
              <span class="tab-icon" aria-hidden="true">
                <!-- bar chart icon -->
                <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                  <path d="M3 21h18" />
                  <rect x="5" y="10" width="3" height="8" rx="1" />
                  <rect x="10.5" y="6" width="3" height="12" rx="1" />
                  <rect x="16" y="12" width="3" height="6" rx="1" />
                </svg>
              </span>
              <span class="tab-label">市场</span>
            </button>
          </li>
          <li class="tab-item">
            <button class="tab-btn" data-target="orders" aria-label="订单">
              <span class="tab-icon" aria-hidden="true">
                <!-- users icon -->
                <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                  <path d="M16 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
                  <circle cx="9" cy="7" r="3" />
                  <path d="M22 21v-2a4 4 0 0 0-3-3.87" />
                  <path d="M16 3.13a3 3 0 0 1 0 5.75" />
                </svg>
              </span>
              <span class="tab-label">订单</span>
            </button>
          </li>
          <li class="tab-item">
            <button class="tab-btn" data-target="subscriptions" aria-label="订阅">
              <span class="tab-icon" aria-hidden="true">
                <!-- subscription icon -->
                <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                  <path d="M9 12l2 2 4-4" />
                  <path d="M21 12c.552 0 1-.448 1-1V5c0-.552-.448-1-1-1H3c-.552 0-1 .448-1 1v6c0 .552.448 1 1 1h18z" />
                  <path d="M3 8h18" />
                </svg>
              </span>
              <span class="tab-label">订阅</span>
            </button>
          </li>
          <li class="tab-item">
            <button class="tab-btn" data-target="broadcast" aria-label="广播">
              <span class="tab-icon" aria-hidden="true">
                <!-- broadcast icon -->
                <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                  <path d="M12 2L2 7l10 5 10-5-10-5z" />
                  <path d="M2 17l10 5 10-5" />
                  <path d="M2 12l10 5 10-5" />
                </svg>
              </span>
              <span class="tab-label">广播</span>
            </button>
          </li>
          <li class="tab-item">
            <button class="tab-btn" data-target="settings" aria-label="设置">
              <span class="tab-icon" aria-hidden="true">
                <!-- user icon -->
                <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                  <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
                  <circle cx="12" cy="7" r="4" />
                </svg>
              </span>
              <span class="tab-label">设置</span>
            </button>
          </li>
        </ul>
      </nav>
    </div>

    <script src="modules/core/api.js"></script>
    <script src="modules/core/router.js"></script>
    <script src="modules/ui/components.js"></script>
    <script src="modules/auth/session.js"></script>
    <script src="modules/core/compat_appapi.js"></script>
    <script src="modules/core/boot.js"></script>
    <script src="modules/auth/login_form.js"></script>
    <script src="app.js"></script>
    <script src="modules/market.js"></script>
    <script src="modules/home/overview.js"></script>
    <script src="modules/settings/save_preferences.js"></script>
    <script src="modules/settings/load_data.js"></script>
    <script src="modules/orders/manager.js"></script>
    <script src="modules/connector_ui.js"></script>
    <script src="modules/admin/strategy_manager.js"></script>
    <script src="modules/subscriptions/manager.js"></script>
    <script src="modules/broadcast/manager.js"></script>
  </body>
  </html>


